<template>
  <div class="loginOuter">
    <div class="login">
      <el-tabs
        stretch
        v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane label="登录" name="first">
          <div class="loginItemOuter">
            <el-input
              v-model="userInfo.username"
              placeholder="请输入用户名"
              clearable
            />
            <el-input
              v-model="userInfo.password"
              type="password"
              placeholder="请输入密码"
              show-password
            />
            <el-button type="primary" round @click="login(true)">
              登录
            </el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="注册" name="second">
          <div class="registerItemOuter">
            <el-input
              v-model="userInfo.username"
              placeholder="请输入用户名"
              clearable
            />
            <el-input
              v-model="userInfo.password"
              type="password"
              placeholder="请输入密码,最少6位"
              show-password
            />
            <el-input
              v-model="userInfo.password1"
              type="password"
              placeholder="请确认密码"
              show-password
            />
            <el-input
              v-model="userInfo.eMail"
              placeholder="请输入邮箱(选填)"
              clearable
            />
            <el-button type="primary" round @click="login(false)">
              注册
            </el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";

import { loginApi, registerApi } from "../../service/apiModule/login";

import { useRouter, useRoute, Router } from "vue-router";
const router = useRouter();

// 用户信息
let userInfo = reactive({
  username: "",
  password: "",
  password1: "",
  eMail: "",
});

onMounted(() => {});

// 标签页默认选中
const activeName = ref("first");

// 标签页点击事件
const handleClick = () => {
  userInfo.username = "";
  userInfo.password = "";
  userInfo.eMail = "";
  userInfo.password1 = "";
};

// 登录
const login = async (type: boolean) => {
  if (type) {
    if (userInfo.username === "") {
      ElMessage({
        showClose: true,
        message: "请输入用户名！",
        type: "warning",
      });
    } else if (userInfo.password === "") {
      ElMessage({
        showClose: true,
        message: "请输入密码！",
        type: "warning",
      });
    } else {
      const { data: res } = await loginApi({
        username: userInfo.username,
        password: userInfo.password,
      });
      if (res.status.code === 200) {
        // 登录成功
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("userInfo", JSON.stringify(res.data.info));
        ElMessage.success("登录成功！");
        router.push("/home");
      } else {
        ElMessage.error("登录失败!");
      }
    }
  } else {
    // 注册
    if (userInfo.username === "") {
      ElMessage({
        showClose: true,
        message: "请输入用户名！",
        type: "warning",
      });
    } else if (userInfo.password === "") {
      ElMessage({
        showClose: true,
        message: "请输入密码！",
        type: "warning",
      });
    } else if (userInfo.password1 !== userInfo.password) {
      ElMessage({
        showClose: true,
        message: "请确定您的密码！",
        type: "warning",
      });
    } else {
      const { data: res } = await registerApi(userInfo);
      if (res.status.code === 200) {
        ElMessage.success("注册成功!");
        activeName.value = "second";
        /*  (userInfo.eMail = ""), (userInfo.password = "");
        userInfo.password1 = "";
        userInfo.username = ""; */
      } else {
        ElMessage.error("注册失败!");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.loginOuter {
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 189, 66, 0.6);
  padding-top: 160px;

  .login {
    width: 36%;
    margin: 0 auto;
    border: 2px solid rgba(0, 0, 255, 0.4);
    padding: 20px;
    background-color: rgba(105, 255, 205, 0.6);

    .registerItemOuter,
    .loginItemOuter {
      padding: 0 40px;

      .el-input {
        height: 40px;
        margin-bottom: 30px;

        &:first-child {
          margin-top: 20px;
        }
      }

      .el-button {
        width: 50%;
        margin-left: 26%;
        margin-top: 20px;
        height: 40px;
        font-size: 20px;
        font-family: "楷体";

        span {
          display: inline-block;
          width: 100px;
          height: 30px;
          border: 1px solid red;
        }
      }
    }
  }
}
</style>
